<template>
  <div class="cpt-comfyui-pubmodal  ">
    <el-dialog v-model="visible" title="" @close="handleClose" :z-index="10">
      <div class="dialogcon-pubworkinfo dialogcon-pubworkinfo-ai   flex rounded-2xl box-border p-0">
        <div class="left p-t-8 2xl:p-t-10" style="
              background-image: url('https://cdn.codinghou.cn/coding/pc-ai/icons/bg_pub.jpg');
              background-size: 100% 100%;
              background-repeat: no-repeat
            ">
        </div>
        <div class="right p-t-20 p-l-2 2xl:p-t-30 2xl:p-l-20">
          <div class="pubtip text-bold text-center text-black-[#4A4A4A] text-lg ">
            作品发布后将会进入"作品社区"板块是否确认发布？
          </div>
          <el-form>
            <div class="form form1 m-t-5">
              <div class="name line" v-show="false">
                <div class="label">作品名称：</div>
                <div class="input">
                  <input type="text" placeholder="请输入作品名称" v-model="name" autocomplete="on" />
                </div>
              </div>
              
              <!-- 优化投稿类型选择区域 -->
              <div class="topic-select line m-t-10">
                <div class="label">投稿类型：</div>
                <div class="radio-container">
                  <el-radio-group 
                    v-model="selectedTopic" 
                    :disabled="isSpecialWorkflow"
                    class="radio-group">
                    <el-radio 
                      v-for="(item, index) in filteredWorkTypeList" 
                      :key="index"
                      :label="item.value || item.label"
                      class="custom-radio">
                      {{ item.label }}
                    </el-radio>
                  </el-radio-group>
                </div>
              </div>

              <div class="btncon m-t-10 flex justify-center">
                <div class="btn-submit valid" :class="[{ valid: isFormValid }]" v-loading="loading"
                  @click="pubworkInfo">
                  确认发布
                </div>
              </div>
            </div>
          </el-form>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { useAppStore } from "~/stores/app";
import { defineProps, defineEmits, watch, computed } from 'vue';
import { postAIPubWorkInfo } from "../../service/yapi";

const { signIn, token, data, status, lastRefreshedAt, signOut, getSession } =
  useAuth();

let app = useAppStore();

let props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  currentTaskInfo: {
    type: Object,
    default: () => ({ id: "" })
  }
})
const { visible, currentTaskInfo } = toRefs(props);

let emits = defineEmits(['update:visible', 'pubworkSuccess'])
watch(() => props.visible, (newVal) => {
  if (!newVal) {
    emits('update:visible', false);
  }
})

let name = ref("");
let selectedTopic = ref("");
let loading = ref(false);

// 判断是否是特殊工作流(古诗配图)
const isSpecialWorkflow = computed(() => {
  return currentTaskInfo.value.worksflowId === 15;
});

// 过滤掉"全部"选项，只显示可投稿的分类
const filteredWorkTypeList = computed(() => {
  return app.workTypeList.filter(item => item.label !== "全部");
});

// 监听当前任务信息变化，设置默认标签
watch(() => currentTaskInfo.value, (newVal) => {
  if (newVal && newVal.worksflowId === 15) {
    // 如果是特殊工作流，默认选中"古诗配图"
    const poetryOption = app.workTypeList.find(item => item.label === "古诗配图");
    selectedTopic.value = poetryOption ? (poetryOption.value || "古诗配图") : "古诗配图";
  } else {
    // 其他情况，默认选中第一个非"全部"的选项
    if (filteredWorkTypeList.value.length > 0) {
      const firstOption = filteredWorkTypeList.value[0];
      selectedTopic.value = firstOption.value || firstOption.label;
    }
  }
}, { immediate: true });

// 表单验证
const isFormValid = computed(() => {
  return selectedTopic.value !== "";
});

function handleClose() {
  emits('update:visible', false);
}

let route = useRoute();

async function pubworkInfo() {
  if (!isFormValid.value) {
    ElMessage.warning("请选择作品类型");
    return;
  }
  
  if (loading.value) {
    return;
  }
  
  loading.value = true;
  let res: any = await postAIPubWorkInfo({
    name: name.value,
    task: currentTaskInfo.value.id,
    prompt_id: currentTaskInfo.value.prompt_id,
    submissionTopic: selectedTopic.value // 添加投稿类型参数
  });
  
  if (res.code == 1000) {
    ElMessage.success("发布成功");
    emits('pubworkSuccess', { id: currentTaskInfo.value.id });
  } else {
    ElMessage.warning(res.message);
  }
  loading.value = false;
}
</script>
<style lang="scss">
.dialogcon-pubworkinfo {
  @apply w-189 h-125 bg-[var(--black-light)] rounded-2xl;

  &.dialogcon-pubworkinfo-ai {
    background: #F7F7F7;

    .left {
      background: linear-gradient(180deg, #368298 0%, #88B9C8 100%);
      border-radius: 10px 0px 0px 10px;
    }

    .right {
      background: #F7F7F7;

      .pubtip {
        line-height: 2;
      }

      .form {
        .line {
          @apply bg-white;

          .label {
            @apply text-black-[#4A4A4A] font-medium mb-2;
            display: block; /* 显示标签 */
          }

          .input {
            background: url('https://cdn.codinghou.cn/coding/pc-ai/icons/bg_input.png');
            background-size: 100% 100%;
            padding: 10px;
            width: 100%;
          }

          input {
            @apply text-black-[#4A4A4A] bg-white block;
          }

          input::-webkit-input-placeholder {
            color: rgba(0, 0, 0, 0.45);
          }

          .input {
            @apply text-black-[#4A4A4A] border-none;
          }
        }
        
        /* 优化投稿类型区域样式 */
        .topic-select {
          width: 100%;
          display: block;
          
          
          .label {
            @apply text-black-[#4A4A4A] font-medium mb-3;
            font-size: 16px;
            margin-left: 6px;
            position: relative;

          }
          
          .radio-container {
            background: white;
            border-radius: 12px;
            padding: 16px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
            margin-top: 8px;
            
            .radio-group {
              display: flex;
              flex-wrap: wrap;
              gap: 12px;
              
              .el-radio {
                margin-right: 0;
                margin-bottom: 0;
                border-radius: 8px;
                border: 1px solid #e8e8e8;
                padding: 8px 16px;
                transition: all 0.2s ease;
                position: relative;
                overflow: hidden;
                
                &::before {
                  content: '';
                  position: absolute;
                  top: 0;
                  left: 0;
                  width: 100%;
                  height: 100%;
                  background: linear-gradient(180deg, #19E8E0 0%, #2974F6 100%);
                  opacity: 0;
                  transition: opacity 0.2s ease;
                  z-index: 0;
                }
                
                .el-radio__input {
                  position: absolute;
                  left: -9999px;
                  
                  & + .el-radio__label {
                    padding-left: 0;
                    position: relative;
                    z-index: 1;
                    transition: color 0.2s ease;
                  }
                }
                
                &.is-checked {
                  // border-color: transparent;
                  
                  &::before {
                    opacity: 1;
                  }
                  
                  .el-radio__label {
                    color: white;
                  }
                }
                
                &:hover:not(.is-checked) {
                  transform: translateY(-2px);
                  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
                  border-color: #d0d0d0;
                }
                
                &:active:not(.is-checked) {
                  transform: translateY(0);
                }
              }
            }
          }
        }
      }

      .btn-submit {
        background: linear-gradient(180deg, #B5FCF9 0%, #97B8F1 100%), #FFFFFF;
        opacity: 0.6;

        &.valid {
          background: linear-gradient(180deg, #19E8E0 0%, #2974F6 92%, #2974F6 100%), #FFFFFF;
          opacity: 1;
        }
      }
    }
  }

  /* 保留原有样式... */
}

/* 增加响应式处理 */
@media (max-width: 768px) {
  .dialogcon-pubworkinfo .dialogcon-pubworkinfo-ai .right .form .topic-select {
    width: 95%;
    
    .radio-container .radio-group {
      gap: 8px;
      
      .el-radio {
        padding: 6px 12px;
      }
    }
  }
}
</style>
